<template>
	<view class="search_content">
		<!-- <view class="left">
            <view class="item bold">常用关键词</view>
            <view 
                class="item grey" 
                v-for="(item, index) in KeywordsList" :key="index" @click="keyword = item">{{ item }}</view>
		</view> -->

		<view class="center">
            <view class="input">
                <u-input @focus="showSearchPage = true" :class="{'applyShake': shakeInput}" v-model="keyword" placeholder="请输入关键词进行搜索" clearable type="text" />
            </view>
            <u-button style="font-size: 40rpx;" @click="handleSearch" type="primary">搜索</u-button>
		</view>

		<view class="right_shop_icon">
            <view class="rigth_shop">
                <u-icon name="shopping-cart" size="48" @click="handleEnter"></u-icon>
                <text class="num">{{shopCarList.length > 99 ? '99+' : shopCarList.length}}</text>
            </view>
        </view>
        <!-- 搜索页面 -->

      <view v-if="showSearchPage" class="popup_content_page">
        <u-popup 
            style="transform: none;"
            :show="showSearchPage" 
            @close="showSearchPage = false" 
            @open="showSearchPage = true"
            mode="center"
            >
            <view 
                class="search_page" 
                @click="showSearchPage = false" >
                <view class="search_content_page">
                    <view  @click.stop  v-if="showSearchPage" class="top_page">
                        <u-input 
                        :class="{'applyShake': shakeInput}" 
                        v-model="keyword" 
                        placeholder="请输入关键词进行搜索" 
                        clearable  type="text" />
                        <u-button style="font-size: 40rpx;" @click="handleSearch" type="primary">搜索</u-button>
                    </view>
                    
                    <view 
                        v-if="KeywordsList.length" 
                        :style="{
                            padding: showSearchPage? '30rpx' : '0rpx',
                            marginTop: showSearchPage? '50rpx' : '0rpx',
                            background: showSearchPage? '#fff' : 'rgba(0,0,0,0)',
                            borderRadius: showSearchPage? '25rpx' : '0rpx',
                        }"
                        @click.stop
                        class="delete_page">
                        <view  v-if="showSearchPage">
                            <view class="title_page">
                                <view>历史记录</view>
                                <text @click="handleDeleteRecord" style="font-size: 50rpx;" class="iconfont icon-shanchu1"></text>
                            </view>
                            <view class="bottom_record">
                                <view class="item_text_page" 
                                    v-for="(item, index) in KeywordsList" :key="index" @click="keyword = item">
                                    {{ item }}
                                </view>
                            </view>
                        </view>
                        
                    </view>
                </view>
            </view>
        </u-popup>
      </view>

	</view>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex';
	export default {
		data() {
			return {
                keyword: '',
                shakeInput:false, // 输入框样式
                showSearchPage: false, // 搜索页面
			}
		},
		onLoad() {
		},
        computed: {
			...mapState(['KeywordsList', 'shopCarList'])
		},
        watch: {
            keyword(newVal) {
                if (!newVal.length) {
                    this.getClearInput()
                    this.getSearch(this.keyword)
                    this.getTableDataAct(1)
                }
            }
        },
		methods: {
            handleDeleteRecord() { // 删除历史记录
                this.clearHistoryRecord()
            },
			handleEnter() {
                uni.navigateTo({
                     url: '../../pages/shopCar/shopCar'
                });
			},
            handleSearch() {
                let timer
                if(!this.keyword){
                    this.shakeInput = true;
                    timer = setTimeout(() => {
                        this.shakeInput = false;
                    },820);
                    return;
                }
                if (timer) {  
                    clearTimeout(timer);  
                    timer = null; // 将timer设置为null，表示没有活动的定时器  
                }

                this.getSearch(this.keyword)
                this.getTableDataAct(1)
                this.showSearchPage = false
            },
            ...mapMutations([
                'getSearch', 
                'getClearInput',
                'clearHistoryRecord',
            ]),
            ...mapActions([
                'getTableDataAct', 
            ]),
		}
	}
</script>

<style lang="less" scoped>
.search_content{
    position: relative;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20rpx;
	height: 140rpx;

    .left {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        font-size: 28rpx;
        height: 100%;
        width: 600rpx;
        // height: calc(100% - 10rpx);
        .item {
            margin-right: 20rpx;
            white-space: nowrap;
            height: 40rpx;
        }
        .bold {
            font-weight: bold;
        }
        .grey {
            color: #ccc;
        }
    }

	.center {
		display: flex;
        margin-left: -80rpx;
        .input {
            border: 1rpx solid #ccc;
            margin-right: 32rpx;
            width: 800rpx;
        }
        
        button {
            width: 160rpx;
            height: 80rpx;
        }
	}

    .right_shop_icon {
        position: absolute;
        right: 20rpx;
        top: 32rpx;
    }

    .rigth_shop {
        position: relative;
        margin-right: 50rpx;

        .num {
            position: absolute;
            top: -25rpx;
            right: -10rpx;
            color: red;
            font-size: 38rpx;
        }
    }
}

.applyShake{
    animation: shake 0.82s cubic-bezier(0.36,0.07,0.19,0.97) both;
}

@keyframes shake {
  10%,90%{
    transform: translate3d(-1px,0,0);
  }
  20%,80%{
    transform: translate3d(2px,0,0);
  }
  30%,50%,70%{
    transform: translate3d(-4px,0,0);
  }
  40%,60%{
    transform: translate3d(4px,0,0);
  }
}

    .popup_content_page {
        /deep/ .u-transition {
            justify-content: flex-start !important;
            padding-top: 180rpx;
        }

        /deep/ .u-popup__content {
            background-color: rgba(0,0,0,0) !important;
        }
    }



.search_page {
    width: 1200rpx;
   
    .search_content_page {
        border-radius: 50rpx;
        .top_page {
            display: flex;
            background: #fff;
            border-radius: 15rpx;
            padding: 20rpx 30rpx;

            input {
                flex: 1;
                border: 1rpx solid #ccc;
            }

            button {
                width: 200rpx;
                height: 80rpx;
            }
        }

        .delete_page {
            transition: all .3s ease;

            .title_page {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 40rpx;
            }

            .bottom_record {
                margin-top: 30rpx;
                font-size: 38rpx;
                .item_text_page {
                    padding: 10rpx 20rpx;
                    border-bottom: 1rpx solid #ccc;
                    overflow:hidden; //超出的文本隐藏
                    text-overflow:ellipsis; //溢出用省略号显示
                    white-space:nowrap; //溢出不换行
                    margin-bottom: 10rpx;
                }
            }
        }
    }
   
}


</style>
